<template>
    <div class="max-w-6xl mx-auto p-6 min-h-screen bg-gradient-to-br from-slate-50 to-emerald-50">
  
      <div class="text-center mb-8 p-8 bg-white rounded-2xl shadow-lg">
        <h2 class="flex items-center justify-center gap-3 text-3xl font-semibold text-gray-800 mb-2">
          <n-icon class="text-4xl text-emerald-500" :component="TalkIcon" />
          谈心谈话记录编辑
        </h2>
        <p class="text-gray-600">请填写或更新谈心谈话的相关信息</p>
      </div>
  
      <div class="mb-6 bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-200 rounded-2xl p-6 shadow-sm">
        <div class="flex items-center gap-3 mb-4">
          <n-icon class="text-2xl text-emerald-600" :component="InfoIcon" />
          <h3 class="text-lg font-semibold text-emerald-800">重要提示信息</h3>
        </div>
        <div class="space-y-2">
          <div v-for="(tip, index) in tipMessages" :key="index" class="flex items-start gap-3 text-sm text-emerald-700">
            <div class="flex-shrink-0 w-1.5 h-1.5 bg-emerald-500 rounded-full mt-2"></div>
            <span>{{ tip }}</span>
          </div>
        </div>
      </div>
  
      <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" :bordered="false">
        <template #header>
          <div class="flex items-center gap-3 py-2">
            <n-icon class="text-xl text-emerald-500" :component="InfoIcon" />
            <span class="text-lg font-semibold text-gray-800">记录信息</span>
          </div>
        </template>
  
        <n-form ref="formRef" :model="formValue" label-placement="top">
          <n-grid :cols="24" :x-gap="24" :y-gap="5">
  
            <n-form-item-gi :span="12" label="谈话人姓名" path="heartToHeartTalk.talkerName">
              <n-input
                v-model:value="formValue.heartToHeartTalk.talkerName"
                placeholder="请输入谈话人姓名"
                class="rounded-lg"
                @update:value="handleInputChange"
              />
            </n-form-item-gi>
  
            <n-form-item-gi :span="12" label="落款时间" path="heartToHeartTalk.signatureDate">
              <n-date-picker
                v-model:formatted-value="formValue.heartToHeartTalk.signatureDate"
                type="date"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="请选择落款时间"
                class="rounded-lg"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item-gi>
  
          </n-grid>
        </n-form>
      </n-card>
  
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch, nextTick } from 'vue'
  import {
    NForm, NGrid, NFormItemGi, NInput, NDatePicker, NCard, NIcon
  } from 'naive-ui'
  import {
    ChatbubblesOutline as TalkIcon,
    InformationCircleOutline as InfoIcon
  } from '@vicons/ionicons5'
  import { cloneDeep } from 'lodash-es'
  
  const props = defineProps({
    // 假设外部传入的数据结构为 { heartToHeartTalk: { ... } }
    member: {
      type: Object,
      required: true
    }
  })
  
  // 定义emit
  const emit = defineEmits(['auto-save'])
  
  const formRef = ref(null)
  
  // 初始化数据，确保heartToHeartTalk对象存在
  const initializeData = (memberData) => {
    // 创建深拷贝以避免直接修改props
    const data = cloneDeep(memberData)
    // 确保heartToHeartTalk对象存在
    if (!data.heartToHeartTalk) {
      data.heartToHeartTalk = {
        talkerName: '',
        signatureDate: null
      }
    }
    return data
  }
  
  // 深拷贝 props 数据，防止直接修改
  const formValue = ref(initializeData(props.member))
  
  const tipMessages = ref([])
  
  const generateTipMessages = () => {
    // 配置与"谈心谈话"相关的提示信息
    tipMessages.value = [
      '谈话人姓名应为官方全名，确保记录的严肃性和准确性。',
      '落款时间是此次谈话记录生效的重要依据，请谨慎选择。',
      '所有记录将作为成员成长档案的一部分被妥善保管。',
      '信息填写后系统将自动保存。'
    ]
  }
  
  // 处理输入变化，触发自动保存
  const handleInputChange = () => {
    // 使用防抖，避免频繁触发自动保存
    if (window.autoSaveTimeout) {
      clearTimeout(window.autoSaveTimeout)
    }
    
    window.autoSaveTimeout = setTimeout(() => {
      emit('auto-save')
    }, 1000) // 1秒后触发自动保存
  }
  
  onMounted(() => {
    generateTipMessages()
  })
  
  // 监听props.member变化，更新formValue
  watch(() => props.member, (newVal) => {
    if (newVal) {
      formValue.value = initializeData(newVal)
    }
  }, { deep: true, immediate: true })
  
  // 通过 defineExpose 暴露获取表单数据的方法给父组件
  defineExpose({
    getEditedData: () => {
      // 确保返回有效数据
      if (!formValue.value || !formValue.value.heartToHeartTalk) {
        return {
          heartToHeartTalk: {
            talkerName: '',
            signatureDate: null
          }
        }
      }
      // 返回包含 heartToHeartTalk 属性的对象，与MemberDetail.vue中的处理逻辑一致
      return {
        heartToHeartTalk: formValue.value.heartToHeartTalk
      }
    }
  })
  </script>